# Postcss 插件

## 快速开始

### 安装插件
import { PackageManagerTabs } from '@theme';

<PackageManagerTabs command="add @empjs/plugin-postcss" />

### 注册插件
```ts title="emp-config.js"
import {defineConfig} from '@empjs/cli'
import pluginPostcss, {postcss as postcssPlugins} from '@empjs/plugin-postcss'
export default defineConfig(store => {
  return {
    plugins:[
      pluginPostcss({
        postcssOptions: {
          plugins: [
            postcssPlugins.autoprefixer(), 
           /**
            * px to vw
            * 默认值
            rootValue: 16,
            unitPrecision: 5,
            propList: ['*'],
            selectorBlackList: [],
            replace: true,
            mediaQuery: false,
            minPixelValue: 0
           * 可通过传入参数进行替换
           */
            postcssPlugins.pxtovw({}), 
           /**
            * px to rem
            * 默认值
            unitToConvert: 'px',
            viewportWidth: 320,
            viewportHeight: 568,
            unitPrecision: 5,
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            propList: ['*'],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            landscape: false,
            landscapeUnit: 'vw',
            landscapeWidth: 568,
           * 可通过传入参数进行替换
           */
            postcssPlugins.pxtorem({}), 
            ],
        },
      }),
    ],
  }
})

```
### Postcss 内置方法 
+ `postcss.autoprefixer` 兼容性设置 集成于 `autoprefixer`
+ `postcss.pxtorem` px转rem 集成于 `postcss-pxtorem`
+ `postcss.pxtovw` px转vw 集成于 `@empjs/postcss-px-to-viewport`


